<template>
  <div class="photo">
    <div class="nav">
      <ul class="list">
        <li class="item" v-for="item in classified" :key="item.id" @click="getPhotoList(item.id)">
          {{ item.title }}
        </li>
      </ul>
    </div>
    <ul class="phlist">
      <li v-for="item in photoList" :key="item.id" @click="$router.push({path: '/photoInfo', query: {id: item.id}})">
        <img v-lazy="item.img_url" />
        <div class="info">
          <h1 class="info-title">{{ item.title }}</h1>
          <div class="info-cot">{{ item.abstract }}</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "photo",
  data() {
    return {
      classified: [
        { id: 0, title: "全部" }, { id: 1, title: "热点" },
        { id: 2, title: "推荐" }, { id: 3, title: "社会" },
        { id: 4, title: "娱乐" }, { id: 5, title: "科技" },
        { id: 6, title: "美女" }, { id: 7, title: "动物" },
        { id: 8, title: "人文科学" }, { id: 9, title: "田园风光" }
      ],
      photoList: [
        { id: 0, img_url: "http://fuss10.elemecdn.com/b/18/0678e57cb1b226c04888e7f244c20jpeg.jpeg", title: "标题", abstract: "本论文是一篇患者类有关怎样写论文摘要,关于胺碘酮治疗心力衰竭合并室性心律失常58例相关毕业论文范文。免费优秀的关于患者及拮抗剂及肺心病方面论文范文资料,适合患者论文写作的大学硕士及本科毕业论文开题报告范文和学术职称论文参考文献下载。" },
        { id: 1, img_url: "http://photocdn.sohu.com/20111207/Img328215620.jpg", title: "标题1", abstract: "摘要145fklaj飞机阿斯顿的发挥；弗利萨大家附件是大家发了数量的卡就发声带就发来的了解噶 对方卢卡斯打赏的" },
      ]
    };
  },
  created() {
    // this.getClassified()// 获取导航分类
    // this.getPhotoList(0)// 获取图片列表
  },
  methods: {
    getClassified() {
      // 获取导航分类
      this.$axios
        .get("http://suggest.taobao.com/sug")
        .then(response => {
          // 请求成功
        })
        .catch(error => {
          // 请求失败
      });
    },
    getPhotoList(photoId) {
      // 根据图片id获取图片分类列表
      /* this.$axios.get("http://suggest.taobao.com/sug").then(response => {
          // 请求成功
        })
        .catch(error => {
          // 请求失败
      }); */
      // 没有后台数据，自己创造一个
      let list1 =  [
        { id: 0, img_url: "http://fuss10.elemecdn.com/b/18/0678e57cb1b226c04888e7f244c20jpeg.jpeg", title: "标题", abstract: "本论文是一篇患者类有关怎样写论文摘要,关于胺碘酮治疗心力衰竭合并室性心律失常58例相关毕业论文范文。免费优秀的关于患者及拮抗剂及肺心病方面论文范文资料,适合患者论文写作的大学硕士及本科毕业论文开题报告范文和学术职称论文参考文献下载。" },
        { id: 1, img_url: "http://photocdn.sohu.com/20111207/Img328215620.jpg", title: "标题1", abstract: "摘要145fklaj飞机阿斯顿的发挥；弗利萨大家附件是大家发了数量的卡就发声带就发来的了解噶 对方卢卡斯打赏的" },
      ]
      let list =  [
        { id: 3, img_url: "http://photocdn.sohu.com/20130416/Img372885486.jpg", title: "标题", abstract: "本论文是一篇患者类有关怎样写论文摘要,关于胺碘酮治疗心力衰竭合并室性心律失常58例相关毕业论文范文。免费优秀的关于患者及拮抗剂及肺心病方面论文范文资料,适合患者论文写作的大学硕士及本科毕业论文开题报告范文和学术职称论文参考文献下载。" },
        { id: 4, img_url: "http://img0.ph.126.net/WPoHgfhyqEjUG_HP2AK7ow==/6631872608210454282.jpg", title: "标题1", abstract: "摘要145fklaj飞机阿斯顿的发挥；弗利萨大家附件是大家发了数量的卡就发声带就发来的了解噶 对方卢卡斯打赏的" },
        { id: 5, img_url: "http://i5.bbs.fd.zol-img.com.cn/t_s800x5000/g4/M0A/04/0C/Cg-4WVDtwiuINRuSAASQhbqRtjwAAESlwPAEqAABJCd035.jpg", title: "标题1", abstract: "摘要145fklaj飞机阿斯顿的发挥；弗利萨大家附件是大家发了数量的卡就发声带就发来的了解噶 对方卢卡斯打赏的" },
      ]
      if(photoId === 0) {
        this.photoList = list1
      }else {
        this.photoList = list
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.photo {
  .phlist {
    padding: 10px 10px 0px 10px;
    li {
      margin-bottom: 10px;
      background: #ccc;
      box-shadow: 0 0 10px #999;
      position: relative;
      text-align: center;
      img[lazy="loading"] {
        width: 40px;
        height: 300px;
        margin: auto;
      }
      img {
        width: 100%;
        vertical-align: middle;
      }
      .info {
        color: white;
        text-align: left;
        position: absolute;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.4) ;
        max-height: 84px;
        .info-title {
          font-size: 14px;
        }
        .info-cot {
          font-size: 13px;
        }
      }
    }
  }
  .nav {
    li {
      list-style: none;
    }
    width: 100%;
    height: 32px;
    overflow-x: scroll;
    position: relative;
    &before {
      content: "";
      position: absolute;
      display: block;
      width: 100%;
      height: 10px;
      background: #fff;
      left: 0;
      bottom: 0;
      z-index: 20;
    }
    .list {
      width: 500%;
      box-sizing: border-box;
      .item {
        float: left;
        height: 30px;
        font-size: 14px;
        line-height: 30px;
        padding: 0 10px;
        text-align: center;
        &:active {
          background: #c0c0c0;
        }
      }
    }
  }
}
</style>